<template>
  <div class="memories-chapter">
    <template v-if="title">
      <wd-navbar
        :title="title"
        light
      >
        <div
          slot="left"
          @click="goBack"
        >
          <wd-icon
            class="middle"
            name="arrow-left"
          />
        </div>
      </wd-navbar>
    </template>

    <!-- <wd-loading
      color="#ddgghh"
      v-if="loading"
      class="loading"
      type="outline" 
      size="100px"
    ></wd-loading> -->
    <div
      class="memories-chapter-container"
      v-for="m in MemoriesChapterList"
      :key="m.id"
      @click="goToDetailView(m.id)"
    >
      <div class="memories-chapter-pic">
        <img :src="m.cover">
      </div>
      <div class="memories-chapter-text">
        <p class="title">{{m.title}}</p>
        <div class="subtitle">{{m.subtitle}}</div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "MemoriesChapterView",

  data() {
    return {
      id: "",
      title: "",
      loading: true,
      MemoriesChapterList: [],
    };
  },

  mounted() {
    this.getMemoriesChapterList();
    // console.log(123);
  },
  activated() {
    this.getMemoriesChapterList();
  },

  methods: {
    //  获取章节目录列表数据
    async getMemoriesChapterList() {
      let { serial_id } = this.$route.query;
      console.log(serial_id);
      let { data } = await this.$axios.get(
        `https://apis.netstart.cn/one/find/serial/list/${serial_id}`
      );
      //   console.log(data);
      this.MemoriesChapterList = data.data;
      console.log(this.MemoriesChapterList);
      let tabTitle = this.MemoriesChapterList.slice(-1);
      this.title = tabTitle[0].title;
      // console.log(this.title);
    },
    goBack() {
      this.$router.go(-1);
    },
    goToDetailView(id) {
      console.log(id);
      let { category } = this.$route.query;
      //   console.log(this.itemlist);
      this.$router.push({
        path: "/detail",
        query: {
          id,
          category,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.memories-chapter {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 50px 15px 10px;
  width: 100vw;
  height: 100vh;
  z-index: 66666;
  overflow: auto;
  background-color: #fff;
  box-sizing: border-box;

  .wd-navbar.is-light {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 20;
    .wd-navbar__title {
      flex: 0;
    }
  }

  .memories-chapter-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    box-sizing: border-box;

    .memories-chapter-pic {
      margin-right: 10px;
      width: 50px;
      height: 50px;
      border-radius: 5px;
      overflow: hidden;
      img {
        display: block;
        width: 100%;
      }
    }
    .memories-chapter-text {
      flex: 1;
      .title {
        font-size: 14px;
        transform: translateY(-10px);
      }
      .subtitle {
        width: 300px;
        transform: translateY(6px);
        font-size: 12px;
        color: #c8b9b9;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
      }
    }
  }
}
.loading{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>